<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view 
			@click="leftClick(index,item.cat_id)"
			v-for="(item,index) in cates" 
			:key="item.cat_id"
			:class="active === index ? 'active' : ''">
			  {{item.cat_name}}
			</view>
		</scroll-view>
		<scroll-view class="right"></scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 左边导航栏数据
				cates:[],
				// 比较index 相同添加类
				active:0,
				// 
				secondData:[]
			}
		},
		methods: {
			getPicsCate(){
				this.$myRequest({
					url:'/categories'
				}).then((res) =>{
					// console.log(res);
					this.cates = res.data.message
				})
			},
			leftClick(index,id){
				// 点击当前index赋值给active 相同添加类
				this.active = index;
				// 点击的同时获取网络请求数据
				this.$myRequest({
					url:'/categories' + id
				}).then((res) => {
					console.log(res);
					this.secondData = res.data.message
				})
			}
		},
		// 页面创建触发
		onLoad() {
			// 页面加载调用网络请求函数
			this.getPicsCate();
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		display: flex;
		.left{
			flex: 1;
			height: 100%;
			border-right: 1px solid #eee;
			view{
				height: 60px;
				line-height: 60px;
				text-align: center;
				font-size: 30rpx;
				z-index: 8;
				border-top: 1px solid #eee;
			}
		}
		.right{
			flex: 3;
		}
		.active{
			background: $shop-color;
			color: #fff;
		}
	}
</style>
